<template>
  <div>
    <el-divider content-position="left">宠物</el-divider>
    <el-table :data="pet_list" style="width: 100%">
      <el-table-column
        prop="name"
        label="名称"
      />
      <el-table-column
        prop="real_name"
        label="真名"
      />
      <el-table-column
        prop="level"
        label="等级"
      />
    </el-table>
    <el-divider content-position="left">物品({{ goods_list.length }})</el-divider>
    <el-row v-for="(item,index) in goods_list" :key="item.id">
      <slot v-if="index<goods_list.length&&index%4==0">
        <el-col :span="6">
          <Goods :goods="item" />
        </el-col>
        <el-col v-if="index<goods_list.length-1" :span="6">
          <Goods :goods="goods_list[index+1]" />
        </el-col>
        <el-col v-if="index<goods_list.length-2" :span="6">
          <Goods :goods="goods_list[index+2]" />
        </el-col>
        <el-col v-if="index<goods_list.length-3" :span="6">
          <Goods :goods="goods_list[index+3]" />
        </el-col>
      </slot>
    </el-row>
  </div>
</template>

<script>
import Goods from '@/components/Goods'
export default {
  name: 'Bag',
  components: { Goods },
  props: {
    goodsList: {
      required: true,
      type: Array
    },
    petList: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      goods_list: this.goodsList,
      pet_list: this.petList
    }
  },
  watch: {
    goodsList: function() {
      this.goods_list = this.goodsList
    },
    petList: function() {
      this.pet_list = this.petList
    }
  }
}
</script>
